<template>
    <div class="country-code">
        <div slot="reference" class="select-country" @click="visible = !visible">
            <div class="code">+{{value}}</div>
            <van-icon name="arrow-down" />
        </div>
        
        <van-popup 
            v-model="visible" 
            position="right" 
            :style="{width:'40%',height:'100%'}"
            get-container="body"
        >
            <div class="country-list">
                <div class="list">
                    <div class="li" v-for="(item,index) in countryList" :key="index" @click="getCountry(item)">
                        <div class="navigator">
                            <div class="tit">
                                <div class="text">{{item.text}}</div>
                            </div>
                            <div class="right">+{{item.id}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
    
</template>

<script>
export default {
    name: '',
    data() { 
        return {
            country:{
                id:'86'
            },
            visible:false,
            countryList:[
                {
                    text:"中国",
                    id:"86"
                },
                {
                    text:"美国",
                    id:"1"
                }
            ],
        }
    },
    model:{
        prop:"value",
        event:"change"
    },
    props: {
        disabled:{
            type:Boolean,
            default:false
        },
        value:{
            type:String,
            default:"86"
        }
    },
    components:{
    },
    mounted() {

    },
    methods:{
        getCountry(item){
            this.visible = false;
            this.$set(this.country,'icon',item.icon);
            this.$set(this.country,'id',item.id);
            this.$emit("change",item.id);
        },
    },
}
</script>

<style lang='scss' scoped>
.select-country{
    display:flex;
    align-items: center;
    cursor: pointer;
    font-size:0.34rem;
    .code{
        margin-right:10px;
    }
}
.country-list{
    height:100%;
    overflow: scroll;
    overflow-x: hidden;
    .li{
        position:relative;
        &:after{
            position: absolute;
            box-sizing: border-box;
            content: ' ';
            pointer-events: none;
            right: 16px;
            bottom: 0;
            left: 16px;
            border-bottom: 1px solid #ebedf0;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
        }
    }
    .navigator{
        display:flex;
        align-items: center;
        justify-content: space-between;
        line-height: 50px;
        font-size:0.34rem;
        cursor: pointer;
        padding:0 15px;
        .right{
            color:#999;
        }
    }
}
</style>